<template>
	<view class="mine-back">
		<view>
			<top-heigth></top-heigth>
			<uv-navbar :fixed="false" bg-color="rgba(0,0,0,0)" title="我的" :safeAreaInsetTop="false">
				<template v-slot:right></template>
				<template v-slot:left>
					<view class="uv-nav-slot"></view>
				</template>
			</uv-navbar>
		</view>
		
		
		<view class="content-box">
			<view class="top-head-box">
				<view class="head-box" @click="goPersonal()">
					<view class="head">
						<image :src="userInfo.userSex==0 ? '/static/image/photo_gril.png' : '/static/image/mine-head.png'"></image>
					</view>
					<view class="head-info">
						{{userInfo && userInfo.id ? (userInfo.userName ? userInfo.userName : userInfo.userMobile) : "未登录"}}
						<image :src="`/static/image/vip${vipNum}.png`" v-if="vipNum" class="vip-tip"></image>
					</view>
					
				</view>
				<view class="head-right" @click="goPersonal()">
					<image src="/static/image/mine-img.png"></image>
					<span>个人中心</span>
				</view>
			</view>
			<view class="content-box mine-nav" v-if="!isShenhe">
				<view class="mine-nav-list">
					<view class="list" @click="goJoin()">
						<image src="/static/image/mine-1.png"></image>
						<view>合作加盟</view>
					</view>
					<view class="list" @click="openChat">
						<image src="/static/image/mine-2.png"></image>
						<view>平台客服</view>
					</view>
					<view class="list" @click="goJoin2(2)" >
						<image src="/static/image/mine-3.png"></image>
						<view>技师入驻</view>
					</view>
					<view class="list" @click="goJoin2(1)">
						<image src="/static/image/mine-4.png"></image>
						<view>商家入驻</view>
					</view>
				</view>
			</view>
			
			
			<view class="content-box mine-font">
				<view>
					<view class="list" @click="goMyCoupon()">
						<view class="list-l">
							<image class="icon" src="/static/image/mine-list1.png"></image>
							<span>优惠券</span>
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
					<view class="list" @click="goStart()">
						<view class="list-l">
							<image class="icon" src="/static/image/mine-list2.png"></image>
							<span>我的收藏</span>
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
					<view class="list" @click="goComplaint()">
						<view class="list-l">
							<image class="icon" src="/static/image/mine-list3.png"></image>
							<span>投诉建议</span>
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
					<view class="list" @click="goAddress()">
						<view class="list-l">
							<image class="icon" src="/static/image/mine-list4.png"></image>
							<span>服务地址</span>
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
					<view class="list" @click="goCallMe()">
						<view class="list-l">
							<image class="icon" src="/static/image/mine-list5.png"></image>
							<span>联系我们</span>
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
					<view class="list" @click="goYinsi()">
						<view class="list-l">
							<image class="icon" src="/static/image/mine-list3.png"></image>
							<span>隐私政策</span>
						</view>
						<image class="go" src="/static/image/more.png"></image>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
	
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					userSex: 1
				},
				vipNum: 0,
				isShenhe: 1
			}
		},
		components: { TopHeigth },
		onLoad() {
			uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
				this.isShenhe = !res.data
			})
		},
		onShow() {
			checkLogin((res) => {
				if(!res){
					this.userInfo = {
						id: null,
						userSex: 1
					}
					this.vipNum = 0
					return false;
				}
				
				this.userInfo = res
				this.getVipInfo()
			}, true)
		},
		methods: {
			goYinsi(){
				uni.navigateTo({
					url: "/pages/login/text3"
				})
			},
			goJoin(){ //合作加盟
				uni.navigateTo({
					url: "/pages/mine/join"
				})
			},
			goJoin2(num){ //招聘 合作
				uni.navigateTo({
					url: "/pages/mine/join2?id="+ num
				})
			},
			goMyCoupon(){ //优惠券
				checkLogin(() => {
					uni.navigateTo({
						url: "/pages/mine/myCoupon"
					})
				})
			},
			goStart(){
				checkLogin(() => {
					uni.navigateTo({
						url: "/pages/mine/start"
					})
				})
				
			},
			goPersonal(){
				checkLogin(() => {
					uni.navigateTo({
						url: "/pages/mine/personal"
					})
				})
			},
			goComplaint(){
				checkLogin(() => {
					uni.navigateTo({
						url: "/pages/mine/complaint"
					})
				})
			},
			goAddress(){
				checkLogin(() => {
					uni.navigateTo({
						url: "/pages/order/address"
					})
				})
			},
			goCallMe(){
				uni.navigateTo({
					url: "/pages/mine/call"
				})
			},
			openChat() {
				checkLogin(() => {
					// 切换会话进入聊天
					const conversationID = `C2CLinYue`;
					// #ifdef APP-PLUS || H5
					TUIConversationService.switchConversation(conversationID);
					// #endif
					uni.navigateTo({
					  url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
					});
				})
			},
			getVipInfo(){
				uni.$u.http.post('/api/shop/v2_0/tAppUserRCA/userMember',{
					id:this.userInfo.id,
				}).then((res) => {
					if(res.code == 200){
						this.vipNum = this.calculateVipGrade(res.data.consumption);
					}
				})
			},
			calculateVipGrade(num){
				if(num == 0){
					return 1;
				}else if(num > 0 && num <= 1000){
					return 2;
				}else if(num > 1000 && num <= 3000){
					return 3;
				}else if(num > 3000 && num <= 5000){
					return 4;
				}else if(num > 5000 && num <= 10000){
					return 5;
				}else if(num > 10000){
					return 6;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	.top-head-box{
		@include flex;
		align-items: center;
		justify-content:space-between;
		height: 200rpx;
		margin-top: 10rpx
		
	}
	.head-box{
		@include flex;
		align-items: center;
		justify-content:flex-start;
		width: 50%;
	}
	.head-box .head{
		width:116rpx;
		height: 116rpx;
		border-radius: 100rpx;
		overflow: hidden;
		text-align: center;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.2);
		background: #fff;
	}
	.head{
		border: 4rpx solid #fff;
	}
	.head image{
		width:116rpx;
		height: 116rpx;
	}
	.head-info{
		flex: 1;
		padding-left: 12rpx;
	}
	.head-right{
		@include flex;
		align-items: center;
		justify-content:flex-start;
		image{
			width:32rpx;
			height:32rpx;
			margin-right: 8rpx;
		}
	}
	.mine-back{
		background: url("/static/image/back2.png") no-repeat;
		background-size: 100% auto;
		
	}
	.mine-nav{
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.1);
		font-size: 24rpx;
		padding-top: 20rpx;
		padding-bottom:20rpx ;
		
		.mine-nav-list{
			@include flex;
			align-items: center;
			justify-content:space-between;
			.list{
				text-align: center;
				width: 20%;
				image{
					width: 93rpx;
					height: 93rpx;
				}
			}
			
		}
	}
	.mine-font{
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.1);
		font-size: 24rpx;
		margin-top: 24rpx;
		
		.list{
			@include flex;
			align-items: center;
			justify-content:space-between;
			padding:28rpx 0;
			border-bottom: 2rpx solid #eee;
			.go{
				width: 32rpx;
				height: 32rpx;
			}
			.list-l{
				@include flex;
				align-items: center;
				justify-content:flex-start;
				.icon{
					width: 40rpx;
					height: 40rpx;
				}
				span{
					margin-left: 16rpx;
				}
				
			}
		}
		.list:last-child{
			border-bottom:none;
		}
	}
	.vip-tip{
		width: 126rpx;
		height: 32rpx;
	}
</style>
